<template>
  <div class="today">
    <!-- <div class="title">生鲜美味</div> -->
    <div class="goods-list">
      <el-row :gutter="20">
        <el-col
          v-for="(l, index) in list"
          :key="l.pid"
          :span="12"
          @click.native="goDetail(l)"
        >
          <div v-if="index < 2">
            <div class="grid-content">
              <img
                :src="l.defaultAlbum"
                alt=""
              >

              <div class="goods-info">
                <div class="goods-name">
                  {{ l.pName }}
                </div>
                <div class="goods-button">
                  点击购买<img
                    src="../../assets/img/more.png"
                    alt=""
                  >
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          v-for="(l, index) in list"
          :key="l.pid"
          :span="8"
          @click.native="goDetail(l)"
        >
          <div v-if="index >= 2 && index < 5">
            <div class="grid-content middle">
              <img
                :src="l.defaultAlbum"
                alt=""
              >

              <div class="goods-info">
                <div class="goods-name">
                  {{ l.pName }}
                </div>
                <div class="goods-button">
                  点击购买<img
                    src="../../assets/img/more.png"
                    alt=""
                  >
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <div class="title">全部</div> -->
    <div class="goods-list-f">
      <div
        v-for="(item, index) in list.slice(5,(list.length))"
        :key="index"
        class="goods-item"
        @click="todetail(item)"
      >
        <div class="goods-img">
          <img
            :src="item.defaultAlbum"
            alt=""
          >
        </div>
        <div class="goods-info">
          <div class="name">
            {{ item.cProductShowName }}{{ item.cModelDescription }}
          </div>
          <div class="price">
            ￥{{ item.fSalePrice }}
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="lastPage > page"
      class="more"
      @click="getMore"
    >
      点击加载更多+
    </div>
    <div
      v-else
      class="more"
    >
      没有更多
    </div>
  </div>
</template>

<script>
	export default {
		name: "",
		components: {},
		data() {
			return {
				list: [],
				page: 1,
				id: "",
				lastPage: 0,
				PageTotal: 0, // 总条目数
			};
		},
		methods: {
			getData(id, shop_id) {
				let params = {
					queryCondition: {
						order: [{
							fieldname: "iOrder",
							direction: "asc",
						}, ],
						pageindex: this.page,
						pagesize: 21,
						where: [{
								fieldname: "tag_id",
								valuefrom: id,
							},
							{
								fieldname: "shop_id",
								valuefrom: shop_id,
							}
						],
					},
				};
				this.$api.home.getProductList(params).then((res) => {
					if (res.code == 200) {
						this.list = this.list.concat(res.data.data)
						this.lastPage = res.data.last_page
						console.log("今日优选", res);
					}
				});
			},
			toList() {
				this.$router.push({
					path: "/today"
				});
			},
			//跳转商品详情
			goDetail(item) {
				console.log("ddd");
				this.$router.push({
					path: "/fruit/detail",
					query: {
						id: item.pid,
						iShopId:item.iShopId
					},
				});
			},
			getMore() {
				this.page++;
				this.getData(this.id);
			},
		},
	};
</script>

<style scoped lang="scss">
	.today {
		padding: 0 16.19rem;
		margin-top: 2.19rem;
		display: flex;
		flex-direction: column;

		.title {
			width: 11.25rem;
			height: 3.44rem;
			background: rgba(0, 0, 0, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.5rem;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(234, 234, 234, 1);
		}

		.goods-list {
			margin-top: 1.88rem;
			width: 100%;

			.grid-content {
				border-radius: 4px;
				height: 27rem;
				background: #fff;
				margin-bottom: 1.31rem;
				display: flex;
				justify-content: space-around;
				align-items: center;
				cursor: pointer;

				>img {
					width: 17rem;
					height: 17rem;
					object-fit: contain;
					padding: 1rem;
				}

				.goods-info {
					display: flex;
					flex-direction: column;

					.goods-name {
						font-size: 1.38rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
						line-height: 2.42rem;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 22rem;
					}

					.goods-price {
						font-size: 1.38rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #f0406f;
						margin-top: 1.25rem;
						text-align: center;
					}

					.goods-button {
						width: 7.5rem;
						height: 1.88rem;
						background: rgba(4, 0, 0, 1);
						font-size: 0.88rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 1.69rem;
						cursor: pointer;

						img {
							margin-left: 0.5rem;
							width: 1.06rem;
							height: 1.25rem;
						}
					}
				}

				&.middle {
					height: 23rem;

					>img {
						width: 10rem;
						height: 10rem;
						object-fit: contain;
						padding: 1rem;
					}

					.goods-info {
						display: flex;
						flex-direction: column;

						.goods-name {
							font-size: 1.38rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(0, 0, 0, 1);
							line-height: 2.42rem;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 13rem;
						}

						.goods-button {
							width: 7.5rem;
							height: 2.19rem;
							background: rgba(4, 0, 0, 1);
							font-size: 0.88rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
							display: flex;
							justify-content: center;
							align-items: center;
							margin-top: 1.69rem;
							cursor: pointer;

							img {
								margin-left: 0.5rem;
								width: 1.06rem;
								height: 1.25rem;
							}
						}
					}
				}
			}
		}
		.adv {
			width: 100%;
			margin-top: 3.69rem;
			object-fit: contain;
		}

		.goods-list-f {
			margin-top: 1.88rem;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.goods-item {
				width: 24%;
				height: 25.88rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 1%;
				margin-bottom: 2.38rem;
				cursor: pointer;
				background: #fff;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.goods-img {
					width: 100%;
					height: 20.94rem;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #fff;

					img {
						width: 16rem;
						height: 16rem;
						object-fit: contain;
					}
				}

				.goods-info {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					// margin: 0 1.5rem;
					// padding: 0 1.5rem;
					// width: 20rem;
					width: 100%;
					.name {
						padding: 0 1.5rem;
						font-size: 1.13rem;
						line-height: 1.5rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.price {
						padding: 0 1.5rem;
						font-size: 1.5rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(243, 64, 111, 1);
						margin-top: 0.75rem;
					}
				}
			}
		}
	}

	.more {
		font-size: 1rem;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 1.95rem;
		text-align: center;
		margin: 3.13rem auto;
		cursor: pointer;
	}
</style>
